<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Show Item</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        /* The Modal (background) */
        .modal {
            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 1;
            /* Sit on top */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgb(0, 0, 0);
            /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4);
            /* Black w/ opacity */
            -webkit-animation-name: fadeIn;
            /* Fade in the background */
            -webkit-animation-duration: 0.4s;
            animation-name: fadeIn;
            animation-duration: 0.4s
        }

        /* Modal Content */
        .modal-content {
            position: fixed;
            bottom: 0;
            background-color: #fefefe;
            width: 100%;
            -webkit-animation-name: slideIn;
            -webkit-animation-duration: 0.4s;
            animation-name: slideIn;
            animation-duration: 0.4s
        }

        /* The Close Button */
        .close {
            color: white;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-header {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }

        .modal-body {
            padding: 2px 16px;
        }

        .modal-footer {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }
    </style>
</head>

<body>
    <% include ../topbar/topbar.html %>
    <h3>결제 창</h3>
    <hr>
    <form action="/contract" method='post'>
        <p>
            <div>
                <img src='/media/itemimages/<%= data.itemData.item_img %>'>
            </div>
            <div>
                <%= data.itemData.item_price %>
            </div>
            <div>
                <%= data.itemData.item_category %>
            </div>
            <div>
                <%= data.itemData.item_info %>
            </div>
            <div>
                <%= data.itemData.item_inc %>
            </div>
            <div>
                <%= data.itemData.item_inc_addr %>
            </div>
            <input type='hidden' name='data' value="<%= JSON.stringify(data.itemData) %>">
        </p>
        <input type='submit' value='결제'>

    </form>
    <form method="POST" action="/commentEdit">
        <% if (data.commentData) { %>
        <%= console.log('in the showitem_detatil', data) %>
        <% for(var  i = 0; i < data.commentData.length; i++) { %>
        <%= data.commentData[i].buyer %> <%= data.commentData[i].comment %>
        <% if(data.commentData[i].selectoption == 0) { %>
        가격에 비해 가성비가 좋아요
        <% } else if (data.commentData[i].selectoption == 1) { %>
        이미지보다 실물이 더 예뻐요
        <% } else if (data.commentData[i].selectoption == 2) { %>
        상품이 튼튼해요
        <% } else if (data.commentData[i].selectoption == 3) { %>
        가격에 비해 가성비가 좋아요
        <% } %>
        <hr><br>

        <% } %>
        <% } else {  %>
        작성된 댓글이 없습니다.
        <% } %>
    </form>

    <% if (data.statusData == undefined) { %>

    <% } else if (data.statusData == 2)  { %>
        <button id='myBtn' name='itemCode' value='<%= data.itemData.item_code %>'>댓글
    작성</button>
    <% } else { %>

    <% } %>


    <div id="myModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close">&times;</span>
                <h2>Check Your Opinion</h2>
            </div>
            <div class="modal-body">
                <div>
                    <input type='radio' name='opinion' value='0'>가격에 비해 가성비가 좋아요</button>
                    <input type='radio' name='opinion' value='1'>이미지보다 실물이 더 예뻐요</button>
                    <input type='radio' name='opinion' value='2'>상품이 튼튼해요</button>
                    <input type='radio' name='opinion' value='3'>가격에 비해 가성비가 좋아요</button>
                    <textarea id='textarea' rows="5" cols="30" placeholder="짧은 의견을 남겨주세요" value=''></textarea>
                    <button type='submit' onclick='submitData()'>제출</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        async function submitData() {
            var itemCode = document.getElementById('myBtn').value;
            var dataindex = document.querySelector('input[name="opinion"]:checked').value;
            var textarea = document.getElementById('textarea').value;
            try {
                const response = await fetch(`http://localhost:3000/submitcomment`, {
                    method: 'POST',
                    headers: {
                        "Content-Type": 'application/json'
                    },
                    body: JSON.stringify({ itemCode, dataindex, textarea })
                });
                var dataResult = await response.json();
                console.log('dataResult', dataResult);
                if (dataResult = true) {
                    modal.style.display = "none";
                }
            } catch (err) {
                window.alert('Data submit Err');
            }
        }

        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks the button, open the modal 
        btn.onclick = function () {
            modal.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function () {
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>

</html>